<?php header("Content-type:text/html;charset=utf-8");?>
<html>
<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript">

function showWait(id, waitInner, text, width, height)
{
	var showText = typeof text == "string" ? text : "数据加载中...";
	var ID = typeof id == "string" ? id : "waitting";
	var waitInner = typeof waitInner == "string" ? waitInner : "body";

//	$("body").append('<div id="zz"></div>');
//	$("#zz").css("top", 0);
//	$("#zz").css("left", 0);
//	$("#zz").css("position", "absolute");
//	$("#zz").css("height", $(window).height());
//	$("#zz").css("width", $(window).width());
//	$("#zz").css("background", "#ccc");
//	$("#zz").css("opacity", 0.7);
//	$("#zz").css("z-index", 9);

	$("body").append('<div id="zz"></div>');
	$("#zz").css("top", $(waitInner).offset().top);
	$("#zz").css("left", $(waitInner).offset().left);
	$("#zz").css("position", "absolute"); //static relative
	$("#zz").css("height", $(waitInner).height());
	$("#zz").css("width", $(waitInner).width());
	$("#zz").css("background", "#cef");
	$("#zz").css("opacity", 0.7);
	//$("#zz").css("z-index",  9);

	//var height = 80;
	//var width = 80;
	//var top = $("body").offset().top + ($("body").height()-height)/2
	//var left = $("body").offset().left + ($("body").width()-width)/2
//	var top = ($(window).height()-height)/2
//	var left = ($(window).width()-width)/2
//	top = top < 0 ? 0 : top;
//	left = left < 0 ? 0 : left;

	var top = ($(waitInner).height()-height)/2 + $(waitInner).offset().top
	var left = ($(waitInner).width()-width)/2 + $(waitInner).offset().left
	top = top < 0 ? 0 : top;
	left = left < 0 ? 0 : left;

	$("body").append('<div id="' + ID + '">' + showText + '</div>');
	$("#" + ID).css("top", top);
	$("#" + ID).css("left", left);
	$("#" + ID).css("position", "absolute"); //relative
	$("#" + ID).css("height", height);
	$("#" + ID).css("width", width);
	$("#" + ID).css("background", "red");
	//$("#" + ID).css("z-index", 10);
}

function closeWait(id)
{
	var ID = typeof id == "string" ? id : "waitting";
	$("#" + ID).remove();
	$("#zz").remove();
}

function ajax(option)
{
	//判断是否设置开始ajax请求前动作，并执行
	if(typeof option.begin == 'function')
	{
		option.begin();
	}

	//获取是否显示等待框设置
	var isShowWait = typeof option.isShowWait != "undefined" ? Boolean(option.isShowWait) : true;
	//判断是否需要显示等待框，如果是，显示等待框
	if(isShowWait && typeof showWait == 'function')
	{
		//获取等待框ID
		var waitID = "waitting";
		if(typeof option.waitID == "string")
		{
			waitID = option.waitID;
		}
		//获取等待文本提示
		var waitText = "数据加载中...";
		if(typeof option.waitText == "string")
		{
			waitText = option.waitText;
		}
		//获取等待框显示到哪个层的上中方（jquery选择器）
		var waitInner = "body";
		if(typeof option.waitInner == "string")
		{
			waitInner = option.waitInner;
		}
		var width = 80;
		alert(typeof option.waitWindowWidth);
		if(typeof option.waitWindowWidth == "number")
		{
			width = option.waitWindowWidth;
		}
		var height = 80;
		if(typeof option.waitWindowHeight == "number")
		{
			height = option.waitWindowHeight;
		}
		showWait(waitID, waitInner, waitText, width, height);
	}

	// 成功事件
	var success = function(data, textStatus, jqXHR){};
	if(typeof option.success == 'function')
	{
		success = option.success;
	}
	option.success = function(data, textStatus, jqXHR)
	{
		if(isShowWait && typeof closeWait == 'function')
		{
			closeWait(waitID);
		}
		success(data, textStatus, jqXHR);
	}

	//完成事件
	var complete = function(XMLHttpRequest, textStatus){};
	if(typeof option.complete == 'function')
	{
		complete = option.complete;
	}
	option.complete = function(XMLHttpRequest, textStatus)
	{
		complete(XMLHttpRequest, textStatus);
	}

	// 失败事件
	var error = function(XMLHttpRequest, textStatus, errorThrown){};
	if(typeof option.error == 'function')
	{
		error = option.error;
	}
	option.error = function(XMLHttpRequest, textStatus, errorThrown)
	{
		if(isShowWait && typeof closeWait == 'function')
		{
			closeWait(waitID);
		}
		error(XMLHttpRequest, textStatus, errorThrown);
	}

	//删除JQuery Ajax无用属性
	delete option.begin;       //方法：ajax请求前执行
	delete option.isShowWait;  //boolean：是否显示等待提示（进度提示）
	delete option.waitText;    //string: 等待提示文本
	delete option.waitID;      //string：等待提示ID
	delete option.waitInner;   //string：显示到哪个层的上中方（jquery选择器）
	delete option.waitWindowWidth; //int px 等待提示框宽度
	delete option.waitWindowHeight; //int px 等待提示框高度

	//执行ajax请求
	$.ajax(option);
}

$(function()
{
	$("#loadding").click(function(){
		ajax({
			type: 'GET',
			url: 'test.php',
			data: '',
			isShowWait: true,
			waitText: "<h1>请等待...</h1>",
			waitID: "loaddingWait",
			waitInner: "#abcde",
			waitWindowWidth: 100, 
			waitWindowHeight: 60,
			cache: false,
			begin: function()
			{
				$("#loadding").attr("disabled", "disabled");
				$("#loadding").text("加载中...");
			},
			success: function(msg) 
			{
				$("#loadding").removeAttr("disabled");
				$("#loadding").text("AJAX加载");
				alert(msg);
			},
			complete: function()
			{
				//$("#loadding").removeAttr("disabled");
				//$("#loadding").text("AJAX加载");
			},
			error: function()
			{
				$("#loadding").removeAttr("disabled");
				$("#loadding").text("AJAX加载");
				alert('error');
			}
		});
	});
});

</script>
<body>
<button id="loadding">AJAX加载</button>
<div id="abcde" style="width:400px; height:230px; background:#ccc; float:left;">Frame</div>
</body>
</html>